<template>
  <!-- 上方菜单 -->
  <div class="menus">
    <div>
      <el-form :inline="true">
        <el-form-item>
          <ElInput v-model="queryInfo.noteGroup" placeholder="信息分组模糊查询"></ElInput>
        </el-form-item>
        <el-form-item>
          <ElInput v-model="queryInfo.title" placeholder="标题模糊查询"></ElInput>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button-group>
        <el-button type="danger" @click="requery"
          ><el-icon><Refresh /></el-icon>重置</el-button
        >
        <el-button type="primary" @click="query"
          ><el-icon><Search /></el-icon>查询</el-button
        >
      </el-button-group>
    </div>
    <div>
      <el-button type="warning" @click="avisible = true"
        ><el-icon><Plus /></el-icon>添加</el-button
      >
    </div>
  </div>

  <!-- 数据呈现 -->
  <div v-loading="loading">
    <el-table :data="list" stripe>
      <el-table-column prop="noteGroup" label="信息分组" />
      <el-table-column prop="title" label="标题" />
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)" size="small">删除</el-button>
          <el-button type="primary" @click="showModify(scope.row)" size="small">修改</el-button>
          <el-button type="success" @click="openShowInfo(scope.row)" size="small">查看内容</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>

  <!-- 添加对话框 -->
  <el-dialog v-model="avisible" title="添加记事本信息" fullscreen @closed="requery" @open="reset">
    <div>
      <el-form>
        <el-form-item label="信息分组" label-width="5em">
          <el-input v-model="addInfo.noteGroup" placeholder="信息分组" autofocus></el-input>
        </el-form-item>
        <el-form-item label="标题" label-width="5em">
          <el-input v-model="addInfo.title" placeholder="标题" autofocus></el-input>
        </el-form-item>
        <el-form-item label="内容" label-width="5em">
          <EditorComp :init-value="addInfo.info" @value-change="addInfoChanged"></EditorComp>
          <!-- <el-input v-model="addInfo.info" placeholder="内容" autofocus></el-input> -->
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: end; width: 100%; padding: 0px 1em">
            <el-button type="danger" @click="reset"
              ><el-icon><Back /></el-icon>重置</el-button
            >
            <el-button type="primary" @click="add" v-loading="loading"
              ><el-icon><Plus /></el-icon>添加</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog v-model="mvisible" title="修改记事本信息" @closed="requery" fullscreen>
    <div>
      <el-form>
        <el-form-item label="信息分组" label-width="5em">
          <el-input v-model="modifyInfo.noteGroup" placeholder="信息分组" autofocus></el-input>
        </el-form-item>
        <el-form-item label="标题" label-width="5em">
          <el-input v-model="modifyInfo.title" placeholder="标题" autofocus></el-input>
        </el-form-item>
        <el-form-item label="内容" label-width="5em">
          <EditorComp :init-value="modifyInfo.info" @value-change="modifyInfoChanged"></EditorComp>
          <!-- <el-input v-model="modifyInfo.info" placeholder="内容" autofocus></el-input> -->
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: end; width: 100%; padding: 0px 1em">
            <el-button type="primary" @click="modify" v-loading="loading"
              ><el-icon><Plus /></el-icon>保存</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>

  <!-- 内容对话框 -->
  <el-dialog v-model="svisible" title="记事本内容" @closed="requery" fullscreen>
    <div class="detail">
      <div>{{ showInfo.title }} ({{ showInfo.noteGroup }})</div>
      <div v-html="showInfo.info"></div>
      <div>{{ Tools.formatDate(showInfo.lastupdate) }}</div>
    </div>
  </el-dialog>

  <BackToHome />
</template>
<script setup lang="ts">
//#region  导入和基本信息
import { ref } from 'vue'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { TbUserNote } from '../../ts/types/UserDataInfo'
import { ApiService } from '../../ts/ApiService'
import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessageBox } from 'element-plus'
import Tools from '../../ts/Tools'
import PageComp from '../../components/PageComp.vue'
import EditorComp from '../../components/EditorComp.vue'
import BackToHome from '../../components/BackToHomeComp.vue'

const loading = ref(false)
//#endregion

//#region 查看内容的部分

const showInfo = ref({} as TbUserNote)
const svisible = ref(false)

const openShowInfo = (info: TbUserNote) => {
  loading.value = true
  ApiService.get(`/user/note/${info.unid}`, {}, (data: BaseDataResult<TbUserNote>) => {
    loading.value = false
    if (data.success) {
      showInfo.value = data.data
      svisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion

//#region 修改的部分
const modifyInfo = ref({} as TbUserNote)
const mvisible = ref(false)

const modifyInfoChanged = (info: string) => {
  modifyInfo.value.info = info
}

const showModify = (info: TbUserNote) => {
  loading.value = true
  ApiService.get(`/user/note/${info.unid}`, {}, (data: BaseDataResult<TbUserNote>) => {
    loading.value = false
    if (data.success) {
      modifyInfo.value = data.data
      mvisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

const modify = () => {
  loading.value = true
  ApiService.put('/user/note', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
      reset()
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion

//#region 删除的部分
const del = (info: TbUserNote) => {
  ElMessageBox.confirm(`是否删除${info.title}？`).then(() => {
    loading.value = true
    ApiService.delete(`/user/note/${info.unid}`, {}, (data: BaseResult) => {
      loading.value = false
      if (data.success) {
        ElMessage.success(data.message)
        requery()
      } else {
        ElMessage.error(data.message)
      }
    })
  })
}

//#endregion

//#region 添加的部分
const addInfo = ref({} as TbUserNote)
const avisible = ref(false)
const reset = () => {
  addInfo.value = {} as TbUserNote
}

const addInfoChanged = (info: string) => {
  addInfo.value.info = info
}

const add = () => {
  loading.value = true
  ApiService.post('/user/note', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      ElMessage.success(data.message)
      reset()
    } else {
      ElMessage.error(data.message)
    }
  })
}

//#endregion

//#region 查询的部分
const queryInfo = ref({} as TbUserNote)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as Array<TbUserNote>)

const requery = () => {
  queryInfo.value = {} as TbUserNote
  page.value = { pageNumber: 1, pageSize: 10 } as PageBean
  query()
}

const query = () => {
  loading.value = true
  ApiService.get(`/user/note/${page.value.pageNumber}/${page.value.pageSize}`, queryInfo.value, (data: BaseDataResult<BasePageVO<Array<TbUserNote>>>) => {
    loading.value = false
    if (data.success) {
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessage.error(data.message)
  })
}

query()

//#endregion
</script>

<style scoped lang="scss">
.menus {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  > div {
    margin-left: 0.2rem;
  }
}

.detail {
  word-break: break-all;

  > div:first-of-type {
    font-size: 1.2em;
    font-weight: bold;
  }
  > div:nth-of-type(2) {
    max-height: 80vh;
    overflow-y: auto;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    margin: 1em 0px;
    padding: 1em 0px;
  }
  > div:last-of-type {
    text-align: right;
  }
}
</style>
